﻿@model TrainingManagerSystem.WebUI.TrainingManagerSystemService.Article[]

<link href="@Url.Content("~/Content/Css/popup.css")" rel='stylesheet' />
<div class="box-title">
    <h3>
        <i class="icon-bar-chart"></i>
        Announcements
    </h3>
    <div class="actions">
        <a class="btn" id="open_popup" name="open_popup" rel="Popup" href="#popup_content"><i class="icon-plus-sign"></i>&nbsp;Add Announcement</a>
        <!--<a class="btn btn-mini content-refresh" href="#"><i class="icon-refresh"></i></a>
                    <a class="btn btn-mini content-remove" href="#"><i class="icon-remove"></i></a>
                    <a class="btn btn-mini content-slideUp" href="#"><i class="icon-angle-down"></i></a>
                    <a class="btn btn-mini content-slideUp" href="#"><i class="icon-angle-up"></i></a>-->
    </div>
</div>
<div class="box-content nopadding" style="display: block;">
    <!--Đây là bảng có thể sắp xếp, phân trang ở client, sử dụng thư viện jquery.dataTables.min.js
                Số lượng cột phải được định nghĩa trước, ở trong file dataTables.js-->
    <table class="table" id="DataTable-Article">
        <thead>
            <tr>
                <th>Title</th>
                <th></th>
                <th>Start</th>
                <th>Action</th>
            </tr>
        </thead>
        <tbody>
            @foreach (var item in Model)
            {
                <tr>
                    <td>
                        <a href="#">@item.Title</a>
                    </td>
                    <td style="display: none;">@Html.Raw(item.Contents)</td>
                    <td>
                        @item.StartDate
                    </td>
                    <td><a href="#" id="A11"><i class="icon-edit">Edit</i></a>&nbsp;@Html.ActionLink("Delete", "DeleteArticle", "Home")
                    </td>
                </tr>
            }
        </tbody>
    </table>
</div>

<script src="~/Content/Scripts/jquery-1.7.1.min.js"></script>
<script src="~/Content/Scripts/jquery.dataTables.min.js"></script>
<script src="~/Content/Scripts/jquery.dataTables.min.js"></script>
<script src="~/Content/Scripts/jquery.bpopup.min.js"></script>

<!-- TinyMCE -->
<script type="text/javascript" src="~/Content/Scripts/tiny_mce/tiny_mce.js"></script>
<script type="text/javascript">
    tinyMCE.init({
        mode: "textareas",
        theme: "simple",
        width: "700",
        height: "200"
    });
</script>
<!-- /TinyMCE -->

<script type="text/javascript">
    $(document).ready(function () {
        var objTable = $('#DataTable-Article').dataTable({
            "aoColumns": [
               null,
               null,
               null,
               null
            ]
        });
        var aData;
        $('#DataTable-Article tr').each(function () {

            $(this).click(function () {
                var aPos = objTable.fnGetPosition(this);
                aData = objTable.fnGetData(aPos);//get data of the clicked row     
                $('#titleArticle').html(aData[0]);
                $('#contentArticle').html(aData[1]);
                $('#popupviewcontent').bPopup();
            });
        });
        $('#open_popup').click(function () {
            $('#popup_content').bPopup();
        });

        $('.btnArticleClose').click(function () {
            $('#popup_content').bPopup().close();
        });
        $('.btnViewArticleClose').click(function () {
            $('#popupviewcontent').bPopup().close();
        });
        $('.btnViewArticleSave').click(function () {
            return;
            $('#popupviewcontent').bPopup().close();
        });
        $('.close_popup').click(function () {
            $('#popupviewcontent').bPopup().close();
        });

    });

</script>



<div id="popupviewcontent" class="popup1">
    <div class="row-fluid">
        <div class="span12">
            <div class="box box-color box-bordered lightgrey" style="width: 800px">
                <div class="popup-header">
                    <h2>View Announcement</h2>
                    <a class="close_popup" href="javascript:void(0)"><b>x</b></a>
                </div>
                <div class="info_popup">
                    <table class="table_popup">
                        <tr>
                            <td class="auto-style2" colspan="2"><b>
                                <div id="titleArticle"></div>
                            </b></td>
                        </tr>
                        <tr>

                            <td class="auto-style2" colspan="2">
                                <br />
                                <div id="contentArticle"></div>
                                <br />


                            </td>
                        </tr>
                        <tr>
                            <td class="auto-style1">Start</td>
                            <td class="auto-style2">11/11/2012
                            </td>
                        </tr>

                        <tr>
                            <td class="auto-style1">File</td>
                            <td class="auto-style2">
                                <a href="#">file01.zip</a>
                        </tr>
                        <tr>
                            <td class="auto-style1">Location</td>
                            <td class="auto-style2">FSOFT

                            </td>
                        </tr>
                        <tr>
                            <td class="auto-style1"></td>
                            <td class="auto-style2">
                                <br />
                            </td>
                        </tr>
                    </table>
                </div>
                <input type="reset" class="btnViewArticleClose" title="Close" value="Close" style="float: right; margin-bottom: 10px;" />
            </div>
        </div>
    </div>
</div>

<div id="popup_content" class="popup">
    <form action="/Home/SaveArticle" method="post">
        <div class="popup-header">
            <h2>Add New Announcement</h2>
        </div>
    <div class="info_popup">

        <table class="table_popup">
            <tr>
                <td>Title</td>
                <td>
                    <input type="text" name="txtTitle" style="width: 700px" /></td>

            </tr>
            <tr>
                <td>Contents</td>
                <td>
                    <textarea cols="85" id="editor1" name="edContents" rows="10"></textarea></td>

            </tr>
            <tr>
                <td>Start Date</td>
                <td>
                    <input type="datetime" name="txtStartDate" />&nbsp;Expired &nbsp;<input type="datetime" name="txtExpried" /></td>              

            </tr>

            <tr>
                <td>Attack File</td>
                <td>
                    <input type="file" name="txtFile" /></td>

            </tr>
            <tr>
                <td>Location</td>
                <td>
                    <input type="checkbox" />
                    FSOFT &nbsp;
                                <input type="checkbox" />
                    FHN &nbsp;
                                <input type="checkbox" />
                    FDN &nbsp;
                                <input type="checkbox" />
                    FHCM 

                </td>

            </tr>
            <tr>
                <td></td>
                <td>
                    <input type="checkbox" title="Public" value="Public" name="cbxPublic" />
                    Public </td>

            </tr>
            <tr>
                <td>&nbsp;</td>
                <td>
                    <input type="reset" value="Cancel" class="btnArticleClose" style="float: right" />
                    <input type="submit" value="Save" class="btnArticleSave" style="float: right; margin-right: 5px;" />
                </td>
            </tr>
        </table>
    </div>
    </form>
</div>
